<template>
    <div class="Home">
        <h2 style="border-left:6px solid #428BFD;">&nbsp; &nbsp;订单管理</h2>
        <orderTitle @searchData="searchData" />
        <orderTable :arr="arr" @resetHome="initGetorderss" />
        <orderPage
            @changePage="changePage"
            @changepageSize="changepageSize"
            :pageSizes="pageSizes"
            :page="page"
            :pageSize="pageSize"
            :total="total"
        />
    </div>
</template>

<script>
import orderTable from './components/orderTable.vue'
import orderTitle from './components/orderTitle.vue'
import orderPage from './components/orderPage.vue'
import { getorderApi } from "@/api/orderApi.js"
export default {
    components: {
        orderTable,
        orderTitle,
        orderPage,
    },
    data() {
        return {
            row: {},
            arr: [],//保存我们表格数据
            keyword: '',
            page: 1,//page 当前页码
            pageSize: 20,//每一页多少条数据
            total: 0,//总条数
            pageSizes: [20, 40, 60, 80, 100] //这个是和pageSize成套使用
        }
    },

    mounted() {

        this.initGetorderss()

    },
    methods: {

        searchData(val) {
            this.keyword = val
            this.initGetorderss()
        },
        changePage(val) {
            this.page = val
            this.initGetorderss()
        },
        changepageSize(val) {
            // 控制pageSize切换
            this.pageSize = val
            this.initGetorderss()
        },
        initGetorderss() {
            getorderApi({ keyword: this.keyword, page: this.page, pageSize: this.pageSize }).then(res => {
                // 发送ajax请求
                console.log(res);
                if (res.code == 200) {
                    this.arr = res.data
                    this.total = res.total
                }
            })
        },
        resets() {
            this.initGetorderss()
        }
    }
}
</script>

<style scoped>
.Home {
    background: #d3e1f6;
}
.el-main[data-v-82a49174] {
    background: #d3e1f6;
}
h2 {
    margin-left: 20px !important;
    margin-bottom: 20px !important;
    font-size: 20px !important;
}
</style>